<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
 
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var dragging = false;
var circle = {
    x: 10,
    y: 10,
    radius: 10
};
 
function drawCircle() {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#003300';
    ctx.stroke();
}
 
function dragStart(e) {
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX - rect.left - circle.radius;
    var y = e.clientY - rect.top - circle.radius;
    if (Math.sqrt(Math.pow(x - circle.x, 2) + Math.pow(y - circle.y, 2)) <= circle.radius) {
        dragging = true;
    }
}
 
function dragEnd(e) {
    dragging = false;
}
 
function drag(e) {
    if (dragging) {
        var rect = canvas.getBoundingClientRect();
        circle.x = e.clientX - rect.left;
        circle.y = e.clientY - rect.top;
        drawCircle();
    }
}
 
canvas.addEventListener('mousedown', dragStart);
canvas.addEventListener('mouseup', dragEnd);
canvas.addEventListener('mousemove', drag);
 
drawCircle();
</script>
 
</body>
</html>